<template>
  <div class="mine-information">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="账号与安全"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!-- 主体内容 -->
    <div class="information-contanier">
      <!-- 个人账号 -->
      <!-- 密码 -->
      <van-cell
        title="密码"
        value="修改密码"
        size="large"
        label="影子信息"
        is-link
        center
        to="/changeusername"
      />
      <!-- 手机号 -->
      <van-cell title="手机号"  label="028-888888" value="修改手机号" is-link />
      <!-- 切换账号&退出登录 -->
      <van-button type="default" size="large" color="#f7d247" to="/login"
        >确定更改</van-button
      >
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.mine-information {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //   主体内容
  .information-contanier {
    flex-grow: 1;
    overflow: auto;
    background: rgb(220, 220, 218);
    .van-cell {
      width: 90%;
      margin: 20px auto;
      border-radius: 10px;
    }
    .van-button {
      width: 90%;
      margin: 20px 16px;
      border-radius: 10px;
    }
  }
}
</style>
